<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted, ref, onBeforeUnmount } from "vue"
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
});

// const [startValue, endValue] = [0, 10]

const option = {
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
        },
        backgroundColor: "rgba(24, 125, 255, 0.8)",
        textStyle: {
            color: "#ffffff",
        },
    },
    grid: {
        top: "10%",
        right: "5%",
        left: "0%",
        bottom: "5%",
        containLabel: true,
    },
    // 控制显示几个柱子
    dataZoom: [
        {
            type: 'slider',
            show: false,
            yAxisIndex: [0],
            start: 0,
            end: 30
        }
    ],
    legend: {
        top: "5%",
        x: "center",
        textStyle: {
            color: "#9E9E9E",
        },
    },
    xAxis: {
        //  data: [1820, 200, 150, 80, 70, 110, 110, 130, 120, 50, 60, 30],
        type: "value",
        show: false,
    },
    yAxis: [
        {
            type: "category",
            triggerEvent: true,
            show: true,
            inverse: true,
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            data: props.xData,
            axisLabel: {
                interval: 0,
                color: "#fff",
                align: "left",
                margin: 80,
                fontSize: 13,
                formatter: function (params) {
                    var val = "";
                    if (params.length > 6) {
                        val = params.substr(0, 5) + "...";
                        return val;
                    } else {
                        return params;
                    }
                },
            },
        },
        {
            data: props.sData,
            type: "category",
            triggerEvent: true,
            show: true,
            inverse: true,
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: false,
                // interval: 0,
                color: "#fff",
                align: "right",
                margin: 50,
                fontSize: 13,
                formatter: function (value, index) {
                    return value;
                },
            },
        },
    ],
    series: [
        {
            data: props.sData,
            type: "bar",
            showBackground: true,
            barWidth: 10,
            barCategoryGap: '10%',
            backgroundStyle: {
                // color: '#091D40',
                color: "rgba(180, 180, 180, 0.1)",
            },
            label: {
                normal: {
                    position: 'right',
                    show: true,
                    color: '#ffffff',
                    // borderWidth: 1,
                    // borderColor: '#1890FF',
                    // borderRadius: 4,
                    // padding: [6, 4, 4, 4],
                },
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                        {
                            offset: 0,
                            color: "#091D40",
                        },
                        {
                            offset: 0.5,
                            color: "#0281CB",
                        },
                        {
                            offset: 1,
                            color: "#00FFF4",
                        },
                    ]),
                },
            },
        },
    ],
};
const chart = ref();
let timer2 = null
let currentIndex = 0;
onMounted(() => {
    chart.value.removeAttribute("_echarts_instance_");
    const myChart = echarts.init(chart.value);
    myChart.setOption(option);
    let start = currentIndex;
    let end = currentIndex + 5; // 每次滚动5条数据
    if (end > props.xData.length) {
        start = 0;
        end = 5;
        currentIndex = 0;
    }
    myChart.dispatchAction({
        type: 'dataZoom',
        startValue: start,
        endValue: end
    });
    currentIndex += 1;
    timer2 = setInterval(function () {
        let start = currentIndex;
        let end = currentIndex + 5; // 每次滚动5条数据
        if (end > props.xData.length) {
            start = 0;
            end = 5;
            currentIndex = 0;
        }
        myChart.dispatchAction({
            type: 'dataZoom',
            startValue: start,
            endValue: end
        });
        currentIndex += 1;
    }, 3000); // 滚动间隔时间为3秒
});

onBeforeUnmount(() => {
    clearInterval(timer2)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
